<template>
  <div>
    <div class="dashboard-container">
      <div class="app-container">
        <el-card shadow="never">
          <el-form>
            <el-form-item label="学科名称">
              <el-input
                v-model="params.subjectName"
                size="small"
                style="width: 200px"
              ></el-input>
              <el-button
                style="margin-left: 10px"
                size="small"
                @click="resetForm"
                >清除</el-button
              >
              <el-button plain type="primary" size="small" @click="hQueryBtn"
                >搜索</el-button
              >
              <el-button
                plain
                class="filter-item fr"
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="addLayer"
                >新增学科</el-button
              >
            </el-form-item>
          </el-form>
          <!-- Alert警告 用于页面中展示重要提示信息
          这里面用到的是其中的自定义关闭按钮中的不可关闭的alert
          由:closable="false"控制
           -->
          <el-alert
          :title="totalContent"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
          <!--  列表 -->
          <el-table :data="list.items" style="width: 100%">
            <el-table-column type="index" prop="id" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="subjectName" label="学科名称" width="80">
            </el-table-column>
            <el-table-column prop="username" label="创建者" width="150">
            </el-table-column>
            <el-table-column prop="addDate" label="创建日期" width="160">
              <template #default="{ row }">
                {{ formatDate(row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <!-- 自定义插槽 -->
              <template #default="{ row }">
                <span v-if="row.isFrontDisplay === 1">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录">
            </el-table-column>
            <el-table-column prop="tags" label="标签"> </el-table-column>
            <el-table-column prop="totals" label="题目数量"> </el-table-column>
            <el-table-column label="操作" width="230">
              <template #default="{ row }">
                <el-button
                  type="text"
                  @click="
                    $router.push({
                      path:
                        '/subjects/directorys?id=' +
                        row.id +
                        '&name=' +
                        row.subjectName,
                    })
                  "
                  >学科分类
                </el-button>
                <el-button
                  type="text"
                  @click="
                    $router.push({
                      path:
                        '/subjects/tags?id=' +
                        row.id +
                        '&name=' +
                        row.subjectName,
                    })
                  "
                  >学科标签
                </el-button>
                <el-button type="text" @click="handMod(row)">修改</el-button>
                <el-button type="text" @click.native="handDel(row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!--  分页组件 -->
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="params.pagesize"
              layout="prev, pager, next,sizes, jumper"
              :total="list.counts"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
    <!--  弹窗组件 -->
    <el-dialog
      :title="this.froms.id ? '修改' : '新增'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="fm"
        :model="froms"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            placeholder="请输入学科名称"
            v-model.trim="froms.subjectName"
          ></el-input>
        </el-form-item>
        <el-form-item label="学科名称" prop="isFrontDisplay">
          <el-switch
            v-model="froms.isFrontDisplay"
            :active-value="1"
            :inactive-value="0"
            @change="change"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="this.handleClose">取 消</el-button>
        <el-button type="primary" @click.native="addBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, remove, add, update, detail } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      totalContent: '',
      // 总数据
      list: {},
      // 页大小
      pagesize: 10,
      params: {
        // 当前页码
        page: 1,
        // 总页数
        pages: 0,
        // 搜索
        subjectName: ''
      },
      // 弹窗
      dialogVisible: false,
      // 弹出层表单
      froms: {
        subjectName: '',
        isFrontDisplay: 1,
        id: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    change (e) {
      console.log(e)
    },
    // 获取页面
    async getlist () {
      const { data } = await list(this.params)
      console.log(data)
      this.list = data
      this.totalContent = '一共有' + data.counts + '条数据'
    },
    // 删除按钮
    async handDel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        const newPage = Math.ceil((this.list.counts - 1) / this.params.pagesize)
        if (newPage > 0) {
          this.params.page = newPage
        }
        this.getlist()
      }).catch(() => { })
    },
    // 搜索
    hQueryBtn () {
      this.getlist()
    },
    // 输入框清空按钮
    resetForm () {
      this.params.subjectName = ''
    },
    // 点击出弹窗
    addLayer () {
      this.dialogVisible = true
    },
    // 弹出层提交-添加学科
    addBtn () {
      this.$refs.fm.validate(async (isOk) => {
        if (isOk) {
          if (this.froms.id) {
            await update({ id: this.froms.id, subjectName: this.froms.subjectName, isFrontDisplay: this.froms.isFrontDisplay })
          } else {
            await add(this.froms)
          }
          this.$message.success('操作成功')
          this.getlist()
          this.handleClose()
        }
      })
    },
    // 修改,回显
    async handMod (data1) {
      this.dialogVisible = true
      const { data } = await detail(data1)
      this.froms = data
      this.getlist()
    },
    // 关闭弹窗
    handleClose () {
      // 关闭弹窗清空上一个表单验证规则 要不然会造成上一个的
      // 验证规则出现在这个表单上(例子:添加学科是你触发了输入不能为空的错误规则
      // 然后你切到修改时那个错误规则还会挂到这个表单验证上来 所以在你关闭弹窗时
      // 使用this.$refs.fm.resetFields()清空上一次的表单验证规则)
      this.$refs.fm.resetFields()
      this.froms = {
        subjectName: '',
        isFrontDisplay: 1
      }
      this.dialogVisible = false
    },
    // 分页
    handleSizeChange (cpg) {
      this.params.pagesize = cpg
      this.getlist()
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.getlist()
    },
    // 格式化时间
    formatDate (value, str = 'YYYY-MM-DD HH:ss:hh') {
      return dayjs(value).format(str)
    }
  }
}

</script>
<style  lang="scss" scoped>
.pagination {
  margin-top: 10px;
  text-align: right;
}
.alert {
  margin: 10px 0px;
}
.app-container {
    padding: 10px;
}
</style>
